<script setup lang="ts">
import { defineProps, PropType } from 'vue'
import { REGEX_HTTP_URL } from '@/libs/validate'
import PreviewImageImages from '@/pages/orderDetail/components/previewImage-images.vue'

const $props = defineProps({
    remarkKey: { type: [String, Number], required: true },
    remark: { type: Object as PropType<{ [x: string]: string }>, required: true },
})
</script>

<template>
    <view v-show="Object.keys(remark).length > 0" class="remark-view">
        <view v-for="(val, key) in remark" :key="key">
            <view v-if="key !== 'newOrderNotify' && key !== 'remark'">
                <text class="remark-view--key">{{ key }}：</text>
                <view v-if="REGEX_HTTP_URL(val)" class="remark-view--image">
                    <preview-image-images :images="[val]" height="80" width="100rpx" />
                </view>
                <text v-else class="remark-view--remarkKey"> {{ val }}</text>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
@include b(remark-view) {
    width: 100%;
    display: flex;
    flex-direction: column;
    @include m(image) {
        margin-bottom: 20rpx;
    }
}
</style>
